<template>
  <div class="project">
    <!-- 预警模型配置  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>预警模型配置</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择省">
              <el-option label="湖南省" value="shanghai"></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择市">
              <!-- <el-option label="" value="shanghai"></el-option> 
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择区">
              <!-- <el-option label="" value="shanghai"></el-option> 
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="">
              <el-option label="常德市石门县南北镇潘坪村雷家山滑坡" value="shanghai"></el-option> 
              <el-option label="常德澧县甘溪镇顺桥地灾隐患点" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择灾害类型">
              <el-option :label="item.label" :value="item.value" v-for="item in typeList" :key="item.value"></el-option>  
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">滑坡</el-button> 
          </el-form-item>
        </el-form>   
      </div>
      <div class="warp warp1 warp2">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline"> 
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="">
              <el-option label="最低" value="最低"></el-option> 
              <el-option label="最高" value="最高"></el-option>
              <el-option label="加权" value="加权"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=""> 
            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="queryFrom.input"> </el-input>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
        <div class="empty"></div>
        <el-button class="btnBg">
          <span>
            <img src="@/assets/images/删除.svg" alt="">删除
          </span>
        </el-button>
        <div class="all_kg">
          <span>总开关: </span>
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
        </div>
      </div>
      <div class="main">
        <div class="main_warp">
          <div class="new_label">新增判据</div>
          <div class="add">
            <img src="@/assets/images/add.svg" alt="">
          </div>
        </div> 
        <div class="main_warp" v-for="i in 9" :key="i"> 
          <div class="box">
            <div class="name">监测类型：滑坡</div>
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
          </div>
          <div class="box">
            <div class="name">设备：00031910240{{ i + 1 }}</div>
            <div class="operator">
              <i class="el-icon-edit icon"></i>
              <i class="el-icon-delete icon"></i>
            </div>
          </div>
          <div class="box">
            <div class="name">属性名称：偏东偏北偏高程</div>
          </div>
          <div class="box">
            <div class="name">判据类型：阈值参数</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    value: true,
    queryFrom: {},
    loading: false,
    configList: [{}],
    total: 1,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    typeList:[
      {label: "滑坡",value: "0"},
      {label: "泥石流",value: "1"},
      {label: "不稳定斜坡",value: "2"},
      {label: "房屋安全监测",value: "3"},
      {label: "风机安全监测",value: "4"},
      {label: "塌陷",value: "5"},
      {label: "崩塌",value: "5"},
      {label: "基坑",value: "5"},
      {label: "河坝",value: "5"}
    ]
  }
},
methods:{
  getList(){}, 
}
}
</script>

<style lang="scss" scoped> 
@import "~@/assets/styles/tablePage.scss"; 
.box{
  display: flex;
  justify-content: space-between;
  .name{
    margin: 0 0 10px;
    min-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .operator{
    .icon{
      margin: 0 6px;
      color: #027aff;
      cursor: pointer;
    }
  }
}
.add{
  margin: 0 0 20px;
  text-align: center;
  img{
    width: 80px;
    height: 80px;
  }
}
.main_warp{
  width: calc(25% - 30px);
  margin: 0 20px 20px 0;
  padding: 15px 30px;
  border: 1px solid #c0ccda;
  border-radius: 15px;
  font-size: 14px;
  color: #606266;
  .new_label{
    font-size: 14px;
    color: #333;
  }
  }
.main{
  display: flex;
  flex-wrap: wrap; 
}
.all_kg{
  color: #606266;
  font-size: 14px;
  span{
    margin-right: 6px;
  }
}
.warp{
  display: flex;
  align-items: center;
}
.btnBg{
  color: #909091;
  background: #f3f6f7;
  border: none;
  margin-right: 10px;
  span{ 
    display: flex;
    align-items: center;
  }
  img{
    width: 14px;
    height: 14px;
    margin: -2px 2px;
  }
} 
.el-select,.el-input{
  width: 14.6vw !important;
}
.empty{
  flex-grow: 1;
}
</style>